<template>
  <!--  <el-button circle @click="open" :icon="Setting"/>-->
  <el-switch
      v-model="theme" active-value="light" inactive-value="dark"
      :active-action-icon="Sunny"
      :inactive-action-icon="Moon"/>

  <el-switch
      v-model="globalLayout"
      active-value="normal"
      inactive-value="simple"/>

  <a-drawer
      v-model:open="visible"
      title="样式配置"
      placement="right">
  </a-drawer>
</template>
<script setup>
import {computed, nextTick, shallowRef} from 'vue';
import store from '@/store';
import {Moon, Sunny} from '@element-plus/icons-vue';

defineOptions({name: 'PortalSetting'});
const visible = shallowRef(false);
const tempLayout = shallowRef(store.state.globalLayout);
const globalLayout = computed({
  get() {
    return tempLayout.value;
  },
  set(v) {
    tempLayout.value = v;
    nextTick(() => {
      store.state.globalLayout = v;
    })
  }
});
const theme = computed({
  get() {
    return store.state.theme;
  },
  set(v) {
    store.state.theme = v;
  },
});

function open() {
  visible.value = true;
}
</script>
<style scoped lang="scss">

</style>